<template>
    <ul class="myul">
        <li class="li-item" v-for="(l,i) in list" :key="i" @click="gotogoodDetail(l)" >
            <img class="li-img" :src="l.img" alt="">
            <h4>{{l.name}}</h4>
            <div class="li-info">
                <p class="li-color">单价:{{l.price}}(元)</p>
                <p>分类:{{l.type.text}}</p>
            </div>
        </li>
    </ul>
</template>
<script>
export default {
    props:['list'],
    methods:{
        gotogoodDetail(item){
            this.$router.push({
                name:"good-detail",
                params:{
                    gid:item.id
                },
                query:{
                    name:item.name
                }
            })
        }
    }
}
</script>


<style lang="scss" scoped>
 .myul{
    width:100%;
    padding:15px;
    .li-item{
        margin-top:15px;
        width:100%;
        height:auto;
        padding-bottom:10px;
        border-radius: 6px;
        box-shadow:  0  0 10px   #999;
        overflow: hidden;
        img{
            width:100%;
            height:180px;
        }
        h4{
            color:#191a1b;
            font-size: 15px;
            padding:0 5px;
        }
        .li-info{
            color:#797d82;
            font-size: 13px;
            display: flex;
            justify-content: space-between;
            margin-top:5px;
                padding:0 5px;
            .li-color{
                color:#ff5f16;
            }
        }
    }
}
</style>
